<template>
  <div>
      <!-- 主体 banner规定了背景颜色和模块宽度 -->
    <div class="w3l-ab-grids py-5 banner2" style="margin-top:3px;">
		<div  class="container py-lg-4">
    <div class="mt-3" style="color: #888;font-size: 16px;margin-left:10px;margin-bottom:10px;">
      <span>电影院：{{cinema.cnm_name}}</span>   
      <span style="margin-left:20px;">地址：{{cinema.cnm_address}}</span>
    </div>
    <div>
      <a-table :columns="columns" :data-source="screenList">
        <template #cnm_hall_id="{ text }"> {{ text }}号厅 </template>
        <template #price="{ text }"> ￥{{ text }} </template>
        <template #opr="{record}">
          <a-button type="primary" @click="toSelectSeat(record.cnm_hall_id, record.price, record.screen_time)">选座购票</a-button>
        </template>
      </a-table>
    </div>
    </div>
    </div>
    <!-- 底部导航栏 -->
	<div class="w3l-footer">
		<section class="footer-inner-main">
			<div class="footer-hny-grids py-5" style="display: none;">
				<div class="container py-lg-4">
					<div class="text-txt">
						<div class="right-side">
							<!--div class="row footer-about">
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner1.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner2.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner3.jpg"
											alt=""></a>
								</div>
								<div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
									<a href="genre.html"><img class="img-fluid" src="../images/banner4.jpg"
											alt=""></a>
								</div>
							</div-->
							<div class="row footer-links">


								<div class="col-md-3 col-sm-6 sub-two-right mt-5">
									<h6>电影</h6>
									<ul>
										<li><a href="#">电影</a></li>
										<li><a href="#">预告片</a></li>
										<li><a href="#">制片人</a></li>
										<li><a href="#">演员</a></li>
										<li><a href="#">放映厅</a></li>
										<li><a href="contact.html">联系我们</a></li>
									</ul>
								</div>
								<div class="col-md-3 col-sm-6 sub-two-right mt-5">
									<h6>导航</h6>
									<ul>
										<li><a href="index.html">首页</a> </li>
										<li><a href="about.html">电影详情</a> </li>
										<li><a href="#">榜单</a> </li>
										<li><a href="#">电影院</a> </li>
										<li><a href="#">注册页面</a></li>
										<li><a href="contact.html">影院联系</a></li>
									</ul>
								</div>
								<div class="col-md-3 col-sm-6 sub-two-right mt-5">
									<h6>位置</h6>
									<ul>
										<li><a href="genre.html">Asia</a></li>
										<li><a href="genre.html">France</a></li>
										<li><a href="genre.html">Taiwan</a></li>
										<li><a href="genre.html">United States</a></li>
										<li><a href="genre.html">Korea</a></li>
										<li><a href="genre.html">United Kingdom</a></li>
									</ul>
								</div>
								<div class="col-md-3 col-sm-6 sub-two-right mt-5">
									<h6>邮件</h6>
									<form action="#" class="subscribe mb-3" method="post">
										<input type="email" name="email" placeholder="您的电子邮箱地址" required="">
										<button><span class="fa fa-envelope-o"></span></button>
									</form>
									<p>输入您的电子邮件，并从我们那里接收最新消息、更新和特别优惠。
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="below-section">
				<div class="container">
					<div class="copyright-footer">
						<div class="columns text-lg-left">
							<p>Copyright &copy; 2020.Company name All rights reserved.</p>
						</div>

						<ul class="social text-lg-right">
							<li><a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
							</li>
							<li><a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
							</li>
							<li><a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
							</li>
							<li><a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
							</li>

						</ul>
					</div>
				</div>
			</div>
			<!-- copyright -->
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
				<span class="fa fa-arrow-up" aria-hidden="true"></span>
			</button>
			<!-- /move top -->

		</section>
	</div>
	<!--//底部导航栏 -->
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";

import { get, post } from "@/common";

const router = useRouter();
const route = useRoute();

const columns = [
  {
    dataIndex: "screen_time", //服务端数据
    title: "放映时间", //表头项名称
    
    
  },
  {
    dataIndex: "cnm_hall_id", //服务端数据
    title: "放映厅" ,//表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "cnm_hall_id" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  },
  {
    dataIndex: "price", //服务端数据
    title: "售价（元）", //表头项名称
    slots: {
      customRender: "price" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  },
  {
    key: "opr",
    title: "选座购票", //表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "opr" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  }
];

let mov_id;
let cnm_id;
const cinemaList = ref([]);
const cinema = ref({});

const getMov_idAndCnm_id = () => {
  mov_id = route.query.mov_id;
  cnm_id = route.query.cnm_id;
};

getMov_idAndCnm_id();

const screenList = ref([]);
const getScreenList = () => {
  get("/info/screen/screen-list-byid",{mov_id: mov_id,cnm_id:cnm_id}).then(res => {
    screenList.value = res.data;
  });
};

getScreenList();

const toSelectSeat = (ch_id, pr, time) => {
  router.push({ path: "/home/seat", query: { mov_id: mov_id, cnm_id:cnm_id, cnm_hall_id:ch_id, price:pr, screen_time:time } });
}

const getCinemaById = () => {
  get("/info/cinema/cinema-list-byid", { cnm_id: cnm_id }).then(res => {
    cinemaList.value = res.data;
    cinema.value = cinemaList.value[0];
  });
};

getCinemaById();
</script>

<style>
@import "../css/cinema.css";
@import "../css/style-starter.css";
@import "../css/base.css";
@import "../css/bootstrap-grid.css";
</style>